var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './src/main.js',//入口 表示要使用 webpack 打包哪个文件
    output: {//输出文件相关的配置
        path: path.resolve(__dirname, 'dist'),  //指定 打包好的文件，输入到哪个目录中去
        filename:'bundle.js'    //这是指定 输出的文件的名称
    },
    devServer: {
        open: true, //自动打开浏览器
        // port: 3000,      设置启动时的运行端口号
        contentBase: 'src', //指定托管的根目录
        hot: true           //启用热更新
       
    },
    plugins: [//所有webpack 插件的配置节点
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            
        }),
        new VueLoaderPlugin()
    ],
    module: {//配置所有第三方loader模块
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=707&name=[name].[ext]' },
            //处理 图片路径的 loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            //处理 字体文件的 loader
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            //配置 babel 来转换高级的ES语法
            { test: /\.vue$/, use: 'vue-loader' },
            //处理 .vue 文件的 loader
            {
                // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                test: /\.(png|jpe?g|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false,            //作用是启用CommonJS模块语法
                            //设置图片在组件中引用报的错---- - (图片img标签 src = "[object Module]")
                            
                            name: '[name].[ext]',       //打包出来的图片名字和后缀都和之前的一样
                            limit:1707
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {//修改 Vue 被导入时候的包路径
            // "vue$":"vue/dist/vue.js"
        }
    }

}


//limit给定的值，是图片的大小，单位是 byte ，如果我们引用的图片 大于或等于 给定的limit值
//则不会被转为base64格式的字符串，如果 图片小于给定的limit值，则会被转为base64的字符转